{% extends 'base.html' %}

{% block title %}{{ group.name }} - 用户组详情 - 固定资产管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:group_list' %}">用户组管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ group.name }}</li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="fas fa-users me-2"></i>{{ group.name }}</h2>
            <div class="btn-group">
                <a href="{% url 'assets:group_edit' group.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>编辑用户组
                </a>
                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                    <span class="visually-hidden">更多操作</span>
                </button>
                <ul class="dropdown-menu">
                    {% if group.name != 'Administrators' %}
                    <li><a class="dropdown-item text-danger" href="{% url 'assets:group_delete' group.pk %}" onclick="return confirm('确定要删除用户组 {{ group.name }} 吗？')">
                        <i class="fas fa-trash me-2"></i>删除用户组
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    {% endif %}
                    <li><a class="dropdown-item" href="{% url 'assets:group_list' %}">
                        <i class="fas fa-arrow-left me-2"></i>返回列表
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">用户组名称:</td>
                                        <td>
                                            <strong>{{ group.name }}</strong>
                                            {% if group.name == 'Administrators' %}
                                                <span class="badge bg-danger ms-2">系统组</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">用户组ID:</td>
                                        <td><code>{{ group.pk }}</code></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">权限数量:</td>
                                        <td>
                                            <i class="fas fa-shield-alt me-1 text-info"></i>{{ group.permissions.count }} 个权限
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">用户数量:</td>
                                        <td>
                                            <i class="fas fa-user me-1 text-success"></i>{{ group.user_set.count }} 个用户
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">组类型:</td>
                                        <td>
                                            {% if group.name == 'Administrators' %}
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-crown me-1"></i>系统管理组
                                                </span>
                                            {% else %}
                                                <span class="badge bg-primary">
                                                    <i class="fas fa-users me-1"></i>自定义组
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">权限级别:</td>
                                        <td>
                                            {% if group.permissions.count > 50 %}
                                                <span class="badge bg-danger">高级权限</span>
                                            {% elif group.permissions.count > 20 %}
                                                <span class="badge bg-warning">中级权限</span>
                                            {% elif group.permissions.count > 0 %}
                                                <span class="badge bg-info">基础权限</span>
                                            {% else %}
                                                <span class="badge bg-secondary">无权限</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">状态:</td>
                                        <td>
                                            <span class="badge bg-success">
                                                <i class="fas fa-check me-1"></i>活跃
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户组成员 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-user-friends me-2"></i>用户组成员
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if users %}
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>用户名</th>
                                            <th>姓名</th>
                                            <th>邮箱</th>
                                            <th>状态</th>
                                            <th>最后登录</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for user in users %}
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-user me-2 text-muted"></i>
                                                    <strong>{{ user.username }}</strong>
                                                </div>
                                            </td>
                                            <td>
                                                {% if user.first_name or user.last_name %}
                                                    {{ user.first_name }} {{ user.last_name }}
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if user.email %}
                                                    <a href="mailto:{{ user.email }}" class="text-decoration-none">{{ user.email }}</a>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if user.is_active %}
                                                    <span class="badge bg-success">激活</span>
                                                {% else %}
                                                    <span class="badge bg-danger">未激活</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if user.last_login %}
                                                    {{ user.last_login|date:"m-d H:i" }}
                                                {% else %}
                                                    <span class="text-muted">从未登录</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <a href="{% url 'assets:user_detail' user.pk %}" class="btn btn-outline-info btn-sm" title="查看用户详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-user-friends fa-2x mb-2"></i>
                                <p class="mb-0">该用户组暂无成员</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 权限列表 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>权限列表
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if permissions %}
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>应用</th>
                                            <th>模型</th>
                                            <th>权限名称</th>
                                            <th>权限代码</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for permission in permissions %}
                                        <tr>
                                            <td><span class="badge bg-info">{{ permission.content_type.app_label }}</span></td>
                                            <td>{{ permission.content_type.model }}</td>
                                            <td>{{ permission.name }}</td>
                                            <td><code>{{ permission.codename }}</code></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-shield-alt fa-2x mb-2"></i>
                                <p class="mb-0">该用户组暂无权限</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="col-md-4">
                <!-- 用户组状态卡片 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-pie me-2"></i>用户组状态
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="mb-3">
                            {% if group.name == 'Administrators' %}
                                <div class="alert alert-danger">
                                    <i class="fas fa-crown fa-2x mb-2"></i>
                                    <h5>系统管理组</h5>
                                    <p class="mb-0">拥有系统最高权限</p>
                                </div>
                            {% elif group.permissions.count > 50 %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-shield-alt fa-2x mb-2"></i>
                                    <h5>高权限组</h5>
                                    <p class="mb-0">拥有较多系统权限</p>
                                </div>
                            {% elif group.permissions.count > 10 %}
                                <div class="alert alert-info">
                                    <i class="fas fa-users fa-2x mb-2"></i>
                                    <h5>普通用户组</h5>
                                    <p class="mb-0">拥有基础权限</p>
                                </div>
                            {% elif group.permissions.count > 0 %}
                                <div class="alert alert-success">
                                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                                    <h5>基础权限组</h5>
                                    <p class="mb-0">拥有少量权限</p>
                                </div>
                            {% else %}
                                <div class="alert alert-secondary">
                                    <i class="fas fa-user fa-2x mb-2"></i>
                                    <h5>无权限组</h5>
                                    <p class="mb-0">暂无分配权限</p>
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 class="text-primary">{{ group.user_set.count }}</h4>
                                <small class="text-muted">用户数</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-info">{{ group.permissions.count }}</h4>
                                <small class="text-muted">权限数</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-bar me-2"></i>统计信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless table-sm">
                            <tr>
                                <td class="text-muted">用户组ID:</td>
                                <td>
                                    <code>{{ group.pk }}</code>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">成员数量:</td>
                                <td>
                                    <i class="fas fa-user me-1 text-muted"></i>
                                    {{ group.user_set.count }} 个用户
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">权限数量:</td>
                                <td>
                                    <i class="fas fa-shield-alt me-1 text-muted"></i>
                                    {{ group.permissions.count }} 个权限
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">活跃用户:</td>
                                <td>
                                    <i class="fas fa-user-check me-1 text-muted"></i>
                                    {{ active_users_count }} 个
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}